<template>
    <!-- 快速下单商品列表 
    @desc 快速下单商品列表
    @author kyle
    @date 2021-03-05
    @props
      productList  ———— 商品列表数据
    @method
      showSpec      ———— 显示规格弹窗
      updateCart    ———— 更新购物车
      goDetailPage  ———— 进入详情页
  -->
    <!-- 快速下单页面列表 -->
    <view class="quick-product-list" :class="isClass ? 'product-list-item-class' : ''">
        <view v-for="(item, index) in currentProductList" :key="index" class="product-list-item">
            <view v-if="!item.IsError">
                <!-- 商品名称 -->
                <view @click="goDetailPage(item, index)" class="product-info-title" v-if="!getAppSet().pagesClassify">
                    <text class="product-info-title-text"><text class="actIcon" v-if="item.ActMS == 1">秒</text><text
                            class="actIcon" v-if="item.ActTJ == 1">特</text>{{ item.ProductName }}</text>
                </view>
                <view class="promotion" v-if="item.PolicyList && item.PolicyList.length > 0"
                    @click.stop="pormotionFn(item)">
                    <view class="promotion_l">
                        <view class="promotion_title">促销</view>
                        <view class="promotion_desc text-show-line-1">{{ item.PolicyList[0].Name }}
                            {{ item.PolicyList[0].Remark }}</view>
                    </view>
                    <view><text class="more">更多</text><uni-icons type="arrowright" size="20"
                            customIcons="icon-gray-1"></uni-icons></view>
                </view>
                <view class="product-info">
                    <view @click="goDetailPage(item, index)">
                        <image class="product-img" :class="getMenuStyle() == 1 ? 'productBigimg' : ''"
                            :src="easyGetImgUrl(item.ThumbnailUrl160)" mode="aspectFill"
                            v-if="displayData.IsShowImg && !getAppSet().isHideImg"></image>
                    </view>

                    <view class="product-info-main">
                        <view class="product-info-main-box">
                            <view class="product-info-title" v-if="getAppSet().pagesClassify">
                                <text class="product-info-title-text">{{ item.ProductName }}</text>
                            </view>
                            <view class="main-box" @click="goDetailPage(item, index)">
                                <view class="taglist" v-if="item.TagsList.length > 0">
                                    <view v-for="tag in item.TagsList">{{ tag.Name }}</view>
                                </view>
                                <!-- 备注 -->
                                <view v-if="displayData.IsShowRemark && item.ShortDescription" class="desc-item">
                                    备注：{{ item.ShortDescription ? item.ShortDescription : "" }}</view>
                                <!-- 换算率 -->
                                <view v-if="displayData.IsShowConversionRate && item.ConversionRateText"
                                    class="desc-item">
                                    包装数量：{{ item.ConversionRateText }}</view>
                                <view class="desc-box favorite-box">
                                    <view class="desc-left" v-if="displayData.IsShowSkuList != 1">
                                        <!-- 规格： -->
                                        <text v-if="
                                            item.ProductSkuList.length === 1 &&
                                            item.ProductSkuList[0].AttributeSkuDisplay
                                        " class="desc-item">
                                            {{
                                                item.ProductSkuList[0].AttributeSkuDisplay
                                                    ? item.ProductSkuList[0].AttributeSkuDisplay.replace("规格:", "")
                                                    : ""
                                            }}
                                        </text>
                                        <text v-if="
                                            item.ProductSkuList.length === 1 &&
                                            !item.ProductSkuList[0].AttributeSkuDisplay
                                        " class="desc-item">默认规格</text>
                                        <text v-if="item.ProductSkuList.length > 1" class="desc-item">
                                            {{ item.ProductSkuList.length }}种规格可选
                                        </text>
                                        <text v-if="item.ProductSkuList.length === 1 && item.ProductSkuList[0].Remark"
                                            class="desc-item">{{ item.ProductSkuList[0].Remark }}</text>
                                        <text v-if="IsShowStock" class="stock-text">{{
                                            showStockMessage(item.CurrentStock)
                                        }}</text>
                                        <!-- <text v-if='!IsShowStock' class="stock-text">{{ item.CurrentStock && item.CurrentStock >0?"有货":"无货" }}</text> -->
                                    </view>
                                    <view class="desc-left" v-else></view>
                                    <!-- 		<iconsfont v-if="getAppSet().proListShowFavorite && displayData.IsShowSkuList!=2" class="favorite-icon"
									:customIcons="item.IsFavorite == 1?'icon-shoucang2':'icon-shoucang11'"
									:color="item.IsFavorite == 1?'#F7B500':'#CCCCCC'" size="34"
									@click.native.stop="favoriteFn(item)"></iconsfont> -->
                                </view>
                            </view>

                            <view class="bottom-box" v-if="displayData.IsShowSkuList != 1">
                                <view class="price-box" style="display: block" @click="goDetailPage(item, index)">
                                    <point v-if="item.IsPointReward > 0" :minPoints="item.MinPoints" />
                                    <view class="price-item" v-else>
                                        <text class="price-text small">￥</text>
                                        <text v-show="item.CurrentMinPrice < item.CurrentMaxPrice"
                                            class="price-text bold">{{ item.CurrentMinPrice }}~</text>
                                        <text class="price-text bold">{{ item.CurrentMaxPrice }}</text>
                                        <!-- <text class="price-text bold">{{ item.CurrentMinPrice }}</text><text class="qi">起</text> -->
                                    </view>
                                    <view
                                        v-if="item.IsPointReward <= 0 && (item.RetailMinPrice || item.RetailMaxPrice)">
                                        <text v-if="!getAppSet().pagesClassify">
                                            <text class="price-text-original" v-if="
                                                item.RetailMinPrice < item.RetailMaxPrice &&
                                                item.CurrentMinPrice != item.RetailMaxPrice
                                            ">零售价:￥{{ item.RetailMaxPrice }}</text>
                                            <text class="price-text-original" v-if="
                                                item.RetailMinPrice >= item.RetailMaxPrice &&
                                                item.CurrentMinPrice != item.RetailMinPrice
                                            ">零售价:￥{{ item.RetailMinPrice }}</text>
                                        </text>
                                    </view>
                                    <view v-if="item.IsPointReward > 0 && item.PointMinPrice < item.RetailMinPrice">
                                        <text v-if="!getAppSet().pagesClassify">
                                            <text class="price-text-original">零售价:￥{{ item.RetailMinPrice }}</text>
                                        </text>
                                    </view>
                                    <!-- <text
									class="stock-text">{{ item.CurrentStock && item.CurrentStock >0?"有货":"无货" }}</text> -->
                                </view>

                                <view class="action-box">
                                    <view class="unit-item">
                                        <view class="unit-btn" :class="{
                                            'unit-change-able': item.ProductUnitList.length > 1,
                                            active: productItemIndex === index,
                                        }" @click.stop="selectUnit(item, index)">
                                            <text class="unit-text">{{ item.CurrentUnit }}</text>
                                            <text class="arrow"
                                                :class="productItemIndex === index ? 'arrow-up' : 'arrow-down'"></text>
                                        </view>
                                        <view v-show="productItemIndex === index" class="custom-pop-over"
                                            :class="{ 'is-last-pop': index == currentProductList.length - 1 }">
                                            <view class="main">
                                                <text v-for="(element, i) in actions" :key="i" class="over-item"
                                                    :class="item.CurrentUnit === element.unitName ? 'current' : ''"
                                                    @click.stop="onSelect(element, index, i)">
                                                    {{ i > 0 ? "1" : "" }}{{ element.text }}
                                                </text>
                                            </view>

                                            <view class="bg" @tap.stop="productItemIndex = -1"></view>
                                        </view>
                                    </view>
                                    <!-- 右侧选规格/加减栏 -->
                                    <view v-if="item.ProductSkuList && item.ProductSkuList.length > 1"
                                        class="product-specs">
                                        <view v-if="getAppSet().pagesClassify || getAppSet().isShowBuyBtn">
                                            <button class="btn btn-success btn-spec"
                                                @click.stop="showSpec(item, index)">
                                                购买
                                            </button>
                                        </view>
                                        <button v-else class="btn btn-success btn-spec"
                                            @click.stop="showSpec(item, index)" :disabled="(!item.CurrentStock || item.CurrentStock < 0) &&
                                                !displayData.NoCheckStock
                                                " :class="{
                                                    disable:
                                                        (!item.CurrentStock || item.CurrentStock < 0) &&
                                                        !displayData.NoCheckStock,
                                                }">
                                            选规格<text v-if="getSpeNum(item.ProductSkuList) > 0" class="badge">{{
                                                getSpeNum(item.ProductSkuList)
                                            }}</text>
                                        </button>
                                    </view>
                                    <view v-else class="product-num custom-num">
                                        <view v-if="item.CurrentUnitList.length == 0">
                                            <view v-if="getAppSet().pagesClassify">
                                                <button class="btn btn-success btn-spec"
                                                    @click.stop="showSpec(item, index)">
                                                    购买
                                                </button>
                                            </view>
                                        </view>
                                        <view v-else v-for="(ite, inde) in item.CurrentUnitList"
                                            v-show="inde === item.UnitActiveIndex" :key="inde" class="">
                                            <view v-if="getAppSet().pagesClassify">
                                                <button class="btn btn-success btn-spec"
                                                    @click.stop="showSpec(item, index)">
                                                    购买
                                                </button>
                                            </view>
                                            <view v-else>
                                                <view v-if="tempType == 0">
                                                    <text v-show="false">{{ getCurrentNum(ite, item) }}</text>
                                                    <button v-if="getAppSet().isShowBuyBtn"
                                                        class="btn btn-success btn-spec"
                                                        @click.stop="showSpec(item, index)">
                                                        购买<text v-if="getSpeNum(item.ProductSkuList) > 0"
                                                            class="badge">{{ getSpeNum(item.ProductSkuList) }}</text>
                                                    </button>
                                                    <easy-num v-else :displayData="displayData" :refresh="refresh"
                                                        :ite="ite" @amountProp="amountProp" :item="item"
                                                        :isTempCar="isTempCar" @changeAmountFn="changeAmountFn">
                                                    </easy-num>
                                                </view>
                                                <view class="input-number-box" v-if="tempType == 1">
                                                    <text v-show="false">{{ getAmountInTempCart(ite) }}</text>
                                                    <button class="btn" @click="changeAmountTemp(ite, ite.Amount, -1)">
                                                        <text>-</text>
                                                    </button>
                                                    <view class="btn-input-box">
                                                        <input v-model="ite.Amount" type="digit" class="btn-input"
                                                            @blur="changeAmountTemp(ite, ite.Amount, 0)" />
                                                    </view>

                                                    <button class="btn" @click="changeAmountTemp(ite, ite.Amount, 1)">
                                                        <text>+</text>
                                                    </button>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 枚举商品规格 -->
                <view v-if="displayData.IsShowSkuList == 1">
                    <view v-for="(itee, inde) in item.ProductSkuList" :key="inde" class="sku-list-item">
                        <view class="">
                            <view>
                                <text class="" v-if="itee.AttributeNameValue">
                                    规格：{{
                                        itee.AttributeNameValue ? reSetAttr(itee.AttributeNameValue) : "默认规格"
                                    }}</text>
                                <view class="price-box">
                                    <view class="price-item">
                                        <text class="price-text small">￥</text>
                                        <text class="price-text">{{ itee.CurrentPrice }}</text>
                                    </view>

                                    <!-- <text class="stock-text">{{ itee.Stock?"有货":"无货" }}</text> -->
                                </view>
                            </view>
                            <view class="action-box">
                                <view class="unit-item">
                                    <view class="unit-btn" :class="{
                                        'unit-change-able': item.ProductUnitList.length > 1,
                                        'unit-spand': productSpecIndex === inde && productItemIndex === index,
                                    }" @click="selectUnitSpec(itee, index, inde)">
                                        <text class="unit-text">{{ itee.CurrentUnit }}</text>
                                        <text class="arrow" :class="productSpecIndex === inde && productItemIndex === index
                                            ? 'arrow-up'
                                            : 'arrow-down'
                                            "></text>
                                    </view>

                                    <view v-show="productSpecIndex === inde && productItemIndex === index"
                                        class="custom-pop-over"
                                        :class="{ 'is-last-pop': index == currentProductList.length - 1 }">
                                        <view class="main">
                                            <text v-for="(element, i) in actions" :key="i" class="over-item"
                                                :class="itee.CurrentUnit === element.unitName ? 'current' : ''"
                                                @click="onSelectSpec(element, index, inde, i)">
                                                {{ i > 0 ? "1" : "" }}{{ element.text }}
                                            </text>
                                        </view>
                                        <view class="bg" @tap="productItemIndex = -1"></view>
                                    </view>
                                </view>
                                <view class="product-num custom-num">
                                    <view v-for="(ite, ind) in itee.ProductUnitPriceList"
                                        v-show="ind === itee.UnitActiveIndex" :key="ind">
                                        <view v-if="tempType == 0">
                                            <text v-show="false">{{ getCurrentNum(ite, item) }}</text>
                                            <easy-num :displayData="displayData" :refresh="refresh" :ite="ite"
                                                @amountProp="amountProp" :item="item" :isTempCar="isTempCar"
                                                @changeAmountFn="changeAmountFn">
                                            </easy-num>
                                        </view>
                                        <view class="input-number-box" v-if="tempType == 1">
                                            <text v-show="false">{{ getAmountInTempCart(ite) }}</text>
                                            <button class="btn" @click="changeAmountTemp(ite, ite.Amount, -1)">
                                                <text>-</text>
                                            </button>
                                            <view class="btn-input-box">
                                                <input v-model="ite.Amount" type="digit" class="btn-input"
                                                    @blur="changeAmountTemp(ite, ite.Amount, 0)" />
                                            </view>

                                            <button class="btn" @click="changeAmountTemp(ite, ite.Amount, 1)">
                                                <text>+</text>
                                            </button>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex"
import utilsOld from "@/utils/utilsOld.js"
import { updateCart, getUserCarList, getUserTempCarList } from "@/utils/cartUtil.js"
import { upTempCartFn, getAmountInTempCart } from "@/utils/tempCartUtil.js"
import { favoriteFn } from "@/utils/productUtil.js"
import config from "@/config/config.js"
import storage from "@/uni-sub-base/utils/storage.js"
import easyNum from "@/components/easy/easy-num.vue"
import { eventBus } from "@/utils/eventBus.js"
import point from "./point.vue"
export default {
    name: "ProductList",
    components: {
        easyNum,
        point,
    },
    props: {
        productList: {
            type: Array,
            required: true,
        },
        displayData: {
            type: Object,
            required: true,
        },
        tempType: {
            type: Number,
            default: 0,
        },
        isOnShow: {
            type: Boolean,
            default: true,
        },
        isClass: {
            type: Boolean,
            default: false,
        },
        orderType: {
            type: Number,
            default: 0,
        },
        isTempCar: {
            type: Boolean,
            default: false,
        }
        // inputAmount: {
        // 	type:String,
        // 	default: ''
        // },
    },
    data() {
        return {
            productItemIndex: -1, // 商品选中序号
            productSpecIndex: -1, // 规格选中序号
            actions: [],
            minPrice: 0,
            maxPrice: 0,
            minRetailPrice: 0,
            maxRetailPrice: 0,
            hasFreeProduct: false,
            isAble: true,
            isUpNum: true,
            setCartTimer: null,
            priceDecimalPlaces: 2,
            refresh: false,
            cartDatas: [],
            IsShowStock: "",
            pormotionData: [],//促销列表
        }
    },
    watch: {
        isOnShow(e) {
            if (!e) {
                this.setUpNumTrue()
            }
        },
        isClass(e) {
            this.$forceUpdate()
        },
    },
    computed: {
        ...mapGetters(["getTempCartData"]),
        currentProductList() {
            const _list = JSON.parse(JSON.stringify(this.productList))
            if (_list && _list.length > 0) {
                _list.forEach((item) => {
                    if (item.ProductUnitList && item.ProductUnitList.length > 1) {
                        // 多规格增加比例换算值
                        item.ConversionRateText = ""
                        if (this.getAppSet().isCustomUnit) {
                            //不需要中间换算
                            let max = item.ProductUnitList[item.ProductUnitList.length - 1]
                            let min = item.ProductUnitList[0]
                            if (item.ProductUnitList[0].Ratio != 1) {
                                item.ConversionRateText = max.Ratio + item.DefaultUnit + "/" + max.UnitName
                            } else {
                                item.ConversionRateText = max.Ratio + min.UnitName + "/" + max.UnitName
                            }
                        } else {
                            const _li = item.ProductUnitList
                            for (let i = _li.length - 1; i > -1; i--) {
                                const _ratio =
                                    _li[_li.length - 1].Ratio % _li[i].Ratio === 0
                                        ? _li[_li.length - 1].Ratio / _li[i].Ratio
                                        : _li[_li.length - 1].Ratio + "/" + _li[i].Ratio
                                item.ConversionRateText += _ratio + _li[i].UnitName + (i > 0 ? "=" : "")
                            }
                        }
                    }
                    if (item.ProductSkuList && item.ProductSkuList.length === 1) {
                        // 单规格
                        item.CurrentUnitList = []
                        if (item.ProductUnitList && item.ProductUnitList.length > 0) {
                            for (let i = 0; i < item.ProductUnitList.length; i++) {
                                let _model = item.ProductUnitList[i].ProductSkuAttrList[0].SkuModel
                                if (_model) {
                                    const _obj = _model.ProductUnitPrice
                                    _obj.Stock = _model.Stock
                                    _obj.AddNum = _model.AddNum
                                    _obj.Title = item.ProductUnitList[i].Title
                                    item.CurrentUnitList.push(_obj)
                                } else if (item.ProductUnitList[i].ProductSkuAttrList[0].ProductAttrList[0]) {
                                    //防止没有SkuModel显示商品
                                    _model = item.ProductUnitList[i].ProductSkuAttrList[0].ProductAttrList[0].SkuModel
                                    if (_model) {
                                        const _obj = _model.ProductUnitPrice
                                        _obj.Stock = _model.Stock
                                        _obj.AddNum = _model.AddNum
                                        _obj.Title = item.ProductUnitList[i].Title
                                        item.CurrentUnitList.push(_obj)
                                    }
                                }
                            }
                        }
                    }
                    if (item.ProductSkuList && item.ProductSkuList.length > 0) {
                        item.ProductSkuList.forEach((res) => {
                            if (res.PromotionBuyData) {
                                if (res.PromotionBuyData.ActKind == 0) {
                                    item.ActMS = 1
                                } else {
                                    item.ActTJ = 1
                                }
                            }
                        })
                    }
                })
            }
            return _list
        },
    },
    created() {
        let productDisplay = storage.getCache("productDisplay")
        if (productDisplay) {
            this.priceDecimalPlaces = productDisplay.PriceDecimalPlaces
        }
    },
    mounted() {
        //初始化获取购物车
        eventBus.$on("SET_CART", (msg) => {
            if (msg) {
                this.cartDatas = msg
                this.refresh = true
                this.$nextTick(() => {
                    this.refresh = false
                })
                this.$forceUpdate()
            }
        })
        eventBus.$on("SET_TEMP_CART", (msg) => {
            console.log("SET_TEMP_CART", msg)
            if (msg) {
                this.cartDatas = msg
                this.refresh = true
                this.$nextTick(() => {
                    this.refresh = false
                })
                this.$forceUpdate()
            }
        })
        if (this.isClass) {
            //获取购物车
            getUserCarList((res) => { })
        }
        if (this.isTempCar) {
            getUserTempCarList((res) => { })
        }
        this.showStockMessage()
    },
    methods: {
        showStockMessage(num) {
            let info = storage.getCache("webInfo")
            if (!this.IsShowStock) {
                this.IsShowStock = info.IsShowStock
                return
            }
            if (info.IsShowStock) {
                this.IsShowStock = true
                if (info.ShowStockMessageList.length) {
                    let list = info.ShowStockMessageList
                    for (let i = 0; i < info.ShowStockMessageList.length; i++) {
                        if (list[i].MaxValue == 0 && num >= list[i].MinValue) {
                            return list[i].Message
                        }
                        if (num >= list[i].MinValue && num <= list[i].MaxValue) {
                            return list[i].Message
                        }
                    }
                    return "库存：" + num
                } else {
                    return "库存：" + num
                }
            } else {
                this.IsShowStock = false
            }
        },
        getMenuStyle() {
            if (this.isClass) {
                return 1
            }
            return config.appSet.proMenuStyle
        },
        setUpNumTrue() {
            this.isUpNum = true
        },
        // 加减
        changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum) {
            const _oldAmount = item.Amount
            if (this.displayData.NoCheckStock) {
                if (type != 0) {
                    item.Amount = num + type
                } else {
                    item.Amount = num
                }
            } else {
                utilsOld.changeAmountNew(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum)
            }
            this.refresh = true
            this.$nextTick(() => {
                this.refresh = false
            })
            this.$forceUpdate()
            //商品
            if (_oldAmount !== item.Amount || type === 0) {
                const _obj = {}
                _obj.ProductId = item.ProductId
                _obj.Amount = item.Amount
                _obj.SkuId = item.SkuId
                _obj.UnitId = item.UnitId
                _obj.UnitName = item.UnitName
                _obj.Ratio = item.Ratio
                let param = []
                param.push(_obj)
                updateCart(param, false, true, this.orderType, this.isTempCar).then((res) => {
                    getUserCarList((res) => { })
                })
            }
        },
        // 待求证 废弃的 todo
        changeAmountFn(item, ite, type) {
            let num = item.Amount
            let stock = item.Stock
            let minNum = ite.MinNum
            let UnitRatio = item.Ratio
            let LimitBuy = ite.LimitBuy
            let addNum = item.Ratio && UnitRatio == 1 ? ite.AddNum : 1
            const _oldAmount = item.Amount
            if (this.displayData.NoCheckStock) {
                if (type != 0) {
                    item.Amount = num + Number(type) * addNum
                    if (type == -1 && item.Amount * UnitRatio < minNum) {
                        item.Amount = 0
                    } else if (item.Amount * UnitRatio < minNum) {
                        minNum = parseInt(minNum / UnitRatio) + (minNum % UnitRatio > 0 ? 1 : 0)
                        let addN = minNum % addNum
                        let newNum = num
                        item.Amount = newNum
                    }
                } else {
                    if (num > 0) {
                        let addN = num % addNum
                        let newNum = num
                        item.Amount = newNum
                        if (item.Amount * UnitRatio < minNum) {
                            minNum = parseInt(minNum / UnitRatio) + (minNum % UnitRatio > 0 ? 1 : 0)
                            let addN = minNum % addNum
                            let newNum = num
                            item.Amount = newNum
                        }
                    } else {
                        item.Amount = 0
                    }
                }
                if (item.Amount < 0) {
                    item.Amount = 0
                }
            } else {
                utilsOld.changeAmountNew(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum)
            }
            this.refresh = true
            this.$nextTick(() => {
                this.refresh = false
            })
            this.$forceUpdate()

            //商品
            if (_oldAmount !== item.Amount || type === 0) {
                const _obj = {}
                _obj.ProductId = item.ProductId
                _obj.Amount = item.Amount
                _obj.SkuId = item.SkuId
                _obj.UnitId = item.UnitId
                _obj.UnitName = item.UnitName
                _obj.Ratio = item.Ratio
                let param = []
                param.push(_obj)
                updateCart(param, false, true, this.orderType).then((res) => { })
            }
        },
        // 加减
        changeAmountTemp(item, num, type) {
            if (type == 0) {
                item.Amount = num
            } else {
                item.Amount = num + type
            }

            // const _oldAmount = item.Amount
            // utilsOld.changeAmountNew(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum)
            // this.$forceUpdate()
            upTempCartFn(item).then((res) => { })
        },
        // 显示规格弹窗
        showSpec(item, index) {
            let token = storage.getCache("token")
            if (!token || token == "") {
                this.$showModal({ show: true })
                return
            }
            this.$emit("sku", item, index)
        },
        // 显示输入订购数量弹窗
        amountProp(ite, item, type, displayData) {
            this.$emit("amountProp", ite, item, type, displayData)
        },
        pormotionFn(e) {
            this.$emit("pormotionFn", e.PolicyList)
        },
        // 进入商品详情
        goDetailPage(item, index) {
            if (this.getAppSet().isHideProDetail) {
                return
            }
            if (this.getAppSet().pagesClassify) {
                this.easyGoTo(`/pages_classify/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}`)
            } else {
                if (this.orderType == 23) {
                    this.easyGoTo(
                        `/pages_shop/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}&orderType=${this.orderType}`,
                    )
                } else {
                    this.easyGoTo(`/pages_shop/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}`)
                }
            }
        },
        // 获取同一规格下最大值和最小值
        getPriceRange(arr) {
            if (arr && arr.length > 0) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].ProductAttrList && arr[i].ProductAttrList.length > 0) {
                        this.getPriceRange(arr[i].ProductAttrList)
                    } else {
                        if (arr[i].SkuModel && arr[i].SkuModel.ProductUnitPrice) {
                            if (arr[i].SkuModel.ProductUnitPrice.Price === 0) {
                                this.hasFreeProduct = true
                            }
                            this.minPrice =
                                this.minPrice < arr[i].SkuModel.ProductUnitPrice.Price && this.minPrice !== 0
                                    ? this.minPrice
                                    : arr[i].SkuModel.ProductUnitPrice.Price
                            this.maxPrice =
                                this.maxPrice > arr[i].SkuModel.ProductUnitPrice.Price
                                    ? this.maxPrice
                                    : arr[i].SkuModel.ProductUnitPrice.Price
                            this.maxRetailPrice =
                                this.maxRetailPrice > arr[i].SkuModel.ProductUnitPrice.RetailPrice
                                    ? this.maxRetailPrice
                                    : arr[i].SkuModel.ProductUnitPrice.RetailPrice
                        }
                    }
                }
            }
        },

        // 选单位
        onSelect(element, index, i) {
            this.currentProductList[index].UnitActiveIndex = i
            this.currentProductList[index].CurrentUnit = element.unitName
            this.currentProductList[index].CurrentUnitId = element.unitId
            this.currentProductList[index].MinPoints =
                element.ratio * this.currentProductList[index].MinPriceData.Points
            this.minPrice = 0
            this.maxPrice = 0
            this.maxRetailPrice = 0
            this.hasFreeProduct = false
            this.getPriceRange(this.currentProductList[index].ProductUnitList[i].ProductSkuAttrList)
            if (this.maxPrice % 1 !== 0) {
                this.maxPrice = Number(this.maxPrice.toFixed(this.priceDecimalPlaces))
            }
            if (this.minPrice % 1 !== 0) {
                this.minPrice = Number(this.minPrice.toFixed(this.priceDecimalPlaces))
            }
            this.currentProductList[index].CurrentMinPrice = this.hasFreeProduct ? 0 : this.minPrice
            this.currentProductList[index].CurrentMaxPrice = this.maxPrice
            this.currentProductList[index].RetailMaxPrice = this.maxRetailPrice
            const _item = this.currentProductList[index]
            this.productItemIndex = -1
            this.$emit("changeUnit", _item)
        },
        // 显示单位选项
        selectUnit(item, index) {
            if (item.ProductUnitList.length < 1) {
                return
            }
            this.actions = []
            if (item.ProductUnitList && item.ProductUnitList.length > 1) {
                this.productItemIndex = this.productItemIndex === index ? -1 : index
                item.ProductUnitList.forEach((element) => {
                    this.actions.push({
                        text: element.Title,
                        ratio: element.Ratio,
                        unitName: element.UnitName,
                        unitId: element.UnitId,
                    })
                })
            }
        },
        onSelectSpec(element, index, inde, i) {
            this.currentProductList[index].ProductSkuList[inde].UnitActiveIndex = i
            this.currentProductList[index].ProductSkuList[inde].CurrentUnit = element.unitName
            this.currentProductList[index].ProductSkuList[inde].CurrentPrice = element.price
            this.productItemIndex = -1
            this.productSpecIndex = 1
            this.$forceUpdate()
        },
        selectUnitSpec(item, index, inde) {
            this.actions = []
            if (item.ProductUnitPriceList && item.ProductUnitPriceList.length > 1) {
                if (this.productItemIndex === index && this.productSpecIndex === inde) {
                    this.productItemIndex = -1
                    this.productSpecIndex = 1
                } else {
                    this.productItemIndex = index
                    this.productSpecIndex = inde
                }
                item.ProductUnitPriceList.forEach((element) => {
                    this.actions.push({
                        text: element.Title,
                        ratio: element.Ratio,
                        unitName: element.UnitName,
                        unitId: element.UnitId,
                        price: element.Price,
                    })
                })
            }
        },
        //关联购物车
        getCurrentNum(item, pro) {
            let value = 0
            //关联商品购物车
            if (this.getSupplierMode() == 0) {
                this.cartDatas.forEach((e) => {
                    e.newSubItems.forEach((v) => {
                        if (v.ProductId == pro.ID) {
                            v.SubItems.forEach((sub) => {
                                if (item.UnitId == sub.UnitId && item.SkuId == sub.SkuId) {
                                    value = sub.Amount
                                }
                            })
                        }
                    })
                })
            } else {
                this.cartDatas.forEach((e) => {
                    if (e.ProductId == pro.ID) {
                        e.SubItems.forEach((sub) => {
                            if (item.UnitId == sub.UnitId && item.SkuId == sub.SkuId) {
                                value = sub.Amount
                            }
                        })
                    }
                })
            }
            item.Amount = value
            return value
        },
        //多规格SKU数量显示
        getSpeNum(item) {
            let value = 0
            //关联商品购物车
            if (this.getSupplierMode() == 0) {
                this.cartDatas.forEach((e) => {
                    e.newSubItems.forEach((v) => {
                        item.forEach((pro) => {
                            if (v.ProductId == pro.ProductId) {
                                value = v.SubItems.length
                            }
                        })
                    })
                })
            } else {
                this.cartDatas.forEach((e) => {
                    item.forEach((pro) => {
                        if (e.ProductId == pro.ProductId) {
                            value = e.SubItems.length
                        }
                    })
                })
            }
            return value
        },
        //关联退货购物车
        getAmountInTempCart(item, pro) {
            let amount = getAmountInTempCart(item)
            item.Amount = amount
            return amount
        },
        //收藏商品
        favoriteFn(item) {
            let isCancel = item.IsFavorite == 1
            let param = {
                isCancel: isCancel,
                productId: item.ID,
            }
            favoriteFn(param).then((res) => {
                item.IsFavorite = isCancel ? 0 : 1
                this.easyToast(isCancel ? "取消收藏" : "收藏成功")
                this.$forceUpdate()
                this.$emit("upFavorite", "")
            })
        },
        reSetAttr(e) {
            return utilsOld.reSetAttr(e)
        },
    },
}
</script>

<style lang="scss" scoped>
.quick-product-list {
    position: relative;
}

.product-list-item {
    display: flex;
    flex-direction: column;
    background: $color-white;
    padding: $app-page-padding;
    margin-bottom: 10rpx;
    border-top-left-radius: 8rpx;
    border-bottom-left-radius: 8rpx;

    .product-info {
        display: flex;
        flex: 1;
        flex-direction: row;

        .product-img {
            display: flex;
            width: 128rpx;
            height: 128rpx;
            border-radius: 8rpx;
            margin-right: $app-page-padding;
            border: 1rpx solid #dfdfdf;
        }

        .productBigimg {
            width: 224rpx;
            height: 224rpx;
        }

        .product-info-main {
            display: flex;
            flex: 1;
            flex-direction: column;

            .product-info-main-box {
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: space-between;
            }

            .main-box {
                display: flex;
                flex-direction: column;
                flex: 1;
            }

            .bottom-box {
                display: flex;
                flex-direction: column;
            }
        }
    }

    .product-info-middle {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20rpx;

        .space-text {
            display: flex;
            flex: 1;
        }
    }

    .product-info-bottom {
        display: flex;
        flex-direction: row;
        align-items: center;

        .left {
            display: flex;
            flex-direction: row;
            flex: 1;

            .product-price {
                display: flex;
                align-items: center;
                margin-right: 10rpx;

                .price-text {
                    color: $color-orange-1;
                    font-size: $font-size-28;

                    font-weight: 700;
                    margin-right: 10rpx;
                }

                .unit-text {
                    color: $app-color-text-tip;
                    font-size: $font-size-20;
                }
            }
        }

        .right {
            .product-specs {
                width: 140rpx;

                .btn {
                    height: 50rpx;
                }
            }
        }
    }
}

.qi {
    color: #ec612a;
    font-size: 24rpx;
    vertical-align: 2rpx;
    padding-left: 2rpx;
}

.product-info-title {
    display: flex;
    flex-direction: row;
    margin-bottom: 16rpx;

    .product-info-title-text {
        display: flex;
        flex: 1;
        font-size: $font-size-28;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 36rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        margin-right: 20rpx;
        margin-bottom: 4rpx;
    }

    .icon-favorite {
        padding-left: 20rpx;
    }
}

.product-list-item-class {
    .product-main-list {
        padding: 0;
    }

    .product-list-item {
        margin-bottom: 0rpx;
        margin-top: 16rpx;
        border-radius: 0;

        .product-img {
            width: 224rpx;
            height: 224rpx;
        }
    }
}

.desc-item {
    margin-bottom: 12rpx;
    color: $app-color-text-tip;
    font-size: $font-size-24;

    &:last-child {
        margin-bottom: 0;
    }

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.price-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .price-item {
        margin-right: 16rpx;

        .price-text {
            font-size: $font-size-32;
            font-size: 36rpx;
            font-family: DINAlternate-Bold, DINAlternate;
        }

        .small {
            font-size: $font-size-26;
            margin-bottom: 3rpx;
            font-weight: bold;
        }
    }
}

.action-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10rpx;
}

.stock-text {
    font-size: $font-size-24;
    color: $app-color-text-tip;
    // margin-left: 6rpx;
    flex: 1;
    display: flex;
    // justify-content: flex-end;
    padding-right: 12rpx;
    white-space: nowrap;
}

.sku-list-item {
    margin-bottom: 10rpx;
}

.unit-btn {
    min-width: 80rpx;
    max-width: 100rpx;
    height: 42rpx;
    border-radius: 70rpx;
    border: solid 1rpx $color-gray-3;
    display: flex;
    align-items: center;
    justify-content: center;

    .unit-text {
        margin-right: 10rpx;
        font-size: 28rpx;
    }

    .arrow {
        border: solid $color-gray-3;
        border-width: 0 1px 1px 0;
        padding: 2px;
    }

    .arrow-up {
        margin-top: 8rpx;
    }

    .arrow-down {
        margin-bottom: 5rpx;
    }
}

.unit-change-able {
    border: solid 1rpx $app-color-main;

    .arrow {
        border-color: $app-color-main;
    }
}

.active {
    border-color: $app-color-main;

    .arrow {
        border-color: $app-color-main;
    }
}

.custom-pop-over {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    top: 60rpx;

    .main {
        position: relative;
        z-index: 1;
        background: $color-white;
        border-radius: 8rpx;
        box-shadow: 0 0 40rpx #ccc;
        max-width: 160rpx;

        .over-item {
            height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: solid 1rpx #f4f4f4;
            font-size: 28rpx;

            &:first-child {
                border-radius: 8rpx 8rpx 0rpx 0rpx;
            }

            &:last-child {
                border-radius: 0rpx 0rpx 8rpx 8rpx;
                border-bottom: 0;
            }
        }

        .current {
            background: $app-color-main;
            color: $color-white;
        }
    }

    .bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }
}

.is-last-pop {
    top: -130rpx;
}

.btn-plus {
    width: 48rpx;
    height: 48rpx;
    line-height: 48rpx;
    border-radius: $border-radius-10;
    background: $app-color-main;

    text {
        justify-content: center;
        align-items: center;
        position: relative;
        font-size: 38rpx;
        color: $color-white;
        display: flex;
        align-self: center;
        margin-bottom: 2rpx;
    }
}

.btn-minus {
    width: 48rpx;
    height: 48rpx;
    line-height: 48rpx;
    border-radius: $border-radius-10;
    border: solid 1rpx $app-color-main;

    &:before {
        background-color: $color-white;
    }

    text {
        justify-content: center;
        align-items: center;
        position: relative;
        font-size: 38rpx;
        color: $app-color-main;
        display: flex;
        align-self: center;
        margin-bottom: 2rpx;
    }
}

.btn-input-box {
    height: 44rpx;

    &:before {
        background: $transparent;
    }

    .btn-input {}
}

.disable {
    text {
        color: $color-gray-3;
    }
}

.bold {
    font-weight: 700;
}

.pro-desc-num {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20rpx;

    .pro-desc-box {
        flex: 1;
        margin-right: 24rpx;
    }

    .action-box {
        width: 180rpx;
        justify-content: flex-end;
    }

    .disable {
        background: rgba(#fefefe, 0.5);

        text {
            color: $color-gray-3;
        }
    }
}

.rate-box {
    margin-top: 16rpx;
    color: $app-color-text-desc;
}

.unit-item {
    display: flex;
    flex: 1;
    position: relative;
}

.btn-input-box {
    height: 44rpx;
    width: 90rpx;
    padding: 0 5rpx;

    &:before {
        background: $transparent;
    }

    .btn-input {
        width: 100%;
        font-size: $font-size-26;
    }
}

.disable {
    text {
        color: $color-gray-C;
    }
}

.favorite-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .desc-left {
        // display: flex;
        // flex: 1;
    }

    .favorite-icon {
        justify-self: flex-end;
        justify-content: flex-end;
    }
}

.btn-spec {
    border-radius: 100rpx;
    height: 52rpx;
    position: relative;
    overflow: initial;
    min-width: 120rpx;
}

.badge {
    height: 14px;
    line-height: 14px;
    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */
    margin-top: 5px;
    font-size: 10px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    color: #fff;
    transform: translate(50%, -50%);
    background-color: $app-color-main;
    border-radius: 9999px;
    position: absolute;
    top: -6px;
    right: 2px;
    border: 2rpx solid #ffffff;
}

.price-text-original {
    color: #ccc;
}

.taglist {
    display: flex;
    flex-wrap: wrap;

    view {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8rpx;
        height: 40rpx;
        background: rgba(236, 97, 42, 0.1);
        border-radius: 6rpx;
        font-size: 22rpx;
        font-family:
            PingFangSC-Regular,
            PingFang SC;
        font-weight: 400;
        color: #ec612a;
        margin-right: 12rpx;
        margin-bottom: 12rpx;
    }
}

.actIcon {
    padding: 0 5rpx;
    height: 28rpx;
    text-align: center;
    line-height: 28rpx;
    font-size: 24rpx;
    color: #fff;
    background: #f1270c;
    border-radius: 8rpx;
    font-weight: normal;
    margin-right: 8rpx;
}

.icon-gray-1 {
    color: #333
}

.promotion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    margin-top: -8rpx;

    .promotion_l {
        display: flex;
        flex: 1;

        .promotion_title {
            width: 60rpx;
            height: 30rpx;
            background: #FFE9F5;
            border-radius: 16rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #F1270C;
            font-size: 20rpx;
        }

        .promotion_desc {
            padding-left: 8rpx;
            font-weight: bold;
            font-size: 24rpx;
            color: #333333;
            width: 80%;
        }

        .more {
            font-size: 24rpx;
        }
    }
}
</style>
